<template>
  <list-page v-loading="state.loading">
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn></template>
    </pub-search>
    <pub-table
      ref="pubTable"
      height="300px"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:option="scope">
        <el-button plain type="primary" @click="select(scope.row)">
          选择
        </el-button>
      </template>
    </pub-table>
    <div class="select-options">
      <el-tag
        v-for="(item, index) in state.selectOptions"
        :key="item.id"
        style="margin: 4px 5px"
        closable
        @close="deleteSelectOption(index)"
      >
        {{
          item.moduleName + ' / ' + item.submoduleName + ' / ' + item.urlName
        }}
      </el-tag>
    </div>
    <div class="dialog-footer-btn">
      <el-button type="default" @click="close()">取消</el-button>
      <el-button v-prevent-repeat-click type="primary" @click="submitForm">
        保存
      </el-button>
    </div>
  </list-page>
</template>
<script setup>
import { useTable } from '@/hooks/UseTable'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  get_menus_api_list,
  get_menus2,
  update_resource
} from '@/api/system.js'
import { onBeforeMount } from 'vue'
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_menus_api_list)

const props = defineProps({
  authId: String
})
const searchColumns = ref([
  {
    label: '平台类型',
    el: 'DictSelect',
    bind: 'platform',
    defaultValue: '1',
    // clearable:false,
    code: 'SYS_PTLX',
    labelWidth: 80
  },
  {
    label: '模块名称',
    el: 'DynamicSelect',
    bind: 'moduleCode',
    defaultValue: '',
    url: 'get_api_module',
    params: {},
    firstValue: true,
    watchKey: 'platform',
    labelWidth: 80
  },
  {
    label: '子模块名称',
    el: 'Input',
    bind: 'submoduleName',
    defaultValue: '',
    labelWidth: 100
  },
  {
    label: '页面名称',
    el: 'Input',
    bind: 'pageName',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '接口路径',
    el: 'Input',
    bind: 'url',
    defaultValue: '',
    labelWidth: 80
  }
])
const columns = ref([
  {
    label: '平台类型',
    prop: 'platform',
    type: 'formatDict',
    formatCode: 'SYS_PTLX'
  },
  { label: '模块名称', prop: 'moduleName' },
  { label: '子模块名称', prop: 'submoduleName' },
  { label: '页面名称', prop: 'pageName' },
  { label: '接口路径', prop: 'url' },
  { label: '接口名称', prop: 'urlName' },
  { label: '鉴权', prop: 'routingCode' },
  { label: '操作', type: 'option', width: '100' }
])
const state = reactive({
  selectOptions: [],
  tableLoading: false,
  loading: false,
  editForm: {}
})
const emit = defineEmits('close')
const deleteSelectOption = index => {
  state.selectOptions.splice(index, 1)
}
const select = row => {
  if (state.selectOptions.every(item => item.id !== row.id)) {
    state.selectOptions.push(row)
  } else {
    ElMessage.info('此条数据已选择')
  }
}

const init = () => {
  state.loading = true
  get_menus2(props.authId).then(res => {
    if (res.succeed) {
      state.editForm = res.data
      if (state.editForm.permJson) {
        state.selectOptions = JSON.parse(state.editForm.permJson)
      }
    }
    state.loading = false
  })
}
const close = () => {
  emit('close')
}
const load = () => {
  state.loading = false
}
const submitForm = async () => {
  if (state.selectOptions.length === 0) {
    ElMessage.error('请选择数据')
    return
  }
  state.loading = true
  state.editForm.perm = state.selectOptions
    .map(item => item.routingCode)
    .join(',')
  state.editForm.permJson = JSON.stringify(state.selectOptions)
  let res = await update_resource(state.editForm)
  if (res.succeed) {
    ElMessage.success(res.msg)
    close()
  }
}
onBeforeMount(() => {
  searchForm.value.resultId = props.authId
  searchForm.value.platform = '1'

  getList()
  init()
})
</script>
<script>
</script>

<style scoped lang="scss">
// @import '@/styles/jiGou.scss';

.dialog-content-top {
  padding: 0;
}

.search-container {
  padding: 0 !important;
}

.table-container {
  height: 300px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.select-options {
  margin-top: 20px;
  min-height: 140px;
}
</style>
